<template>
	<view class="address">
		<view class="address-card">
			<uni-card :is-shadow="false" :border="false" :margin="'20rpx'" :spacing="'20rpx'" :padding="0" >
				<view class="input" >
				<uni-forms ref="valiForm" :recruits="rules" :modelValue="valiFormData">
					<uni-forms-item label="联系人" required name="a_name">
						<uni-easyinput :clearable="false" :inputBorder="false" v-model="valiFormData.a_name" placeholder="请输入联系人" trim="both" />
					</uni-forms-item>
					<uni-forms-item label="联系方式" required name="tel">
						<uni-easyinput :clearable="false" type="number" :inputBorder="false" v-model="valiFormData.tel" placeholder="请输入联系方式" trim="both" />
					</uni-forms-item>
					<uni-forms-item label="详细地址" required name="road">
						<uni-easyinput :clearable="false" :inputBorder="false" v-model="valiFormData.road" placeholder="请输入详细地址" trim="both" style="flex:1;order:1;"/>
						<uni-icons type="location-filled" :color="valiFormData.road == ''?'#999999':'#D8EEFC'" :size="'50r'" style="order: 0;padding-left: 10rpx;" @click="getAddress"/>
					</uni-forms-item>
					<uni-forms-item label="详细地址" required name="detail_road" style="display: none;">
						<uni-easyinput :clearable="false" :inputBorder="false" v-model="valiFormData.detail_road" placeholder="详细地址" trim="both" />
					</uni-forms-item>
					<uni-forms-item label="地址选择" required name="type" style="display: none;">
						<uni-easyinput :clearable="false" :inputBorder="false" v-model="valiFormData.type" placeholder="请选择地址" trim="both" />
					</uni-forms-item>
					<uni-forms-item label="默认状态" required name="curruct" style="display: none;">
						<uni-easyinput :clearable="false" :inputBorder="false" v-model="valiFormData.curruct" placeholder="请选择默认状态" trim="both" />
					</uni-forms-item>
					<uni-forms-item label="经度" required name="addr_longitude" style="display: none;">
						<uni-easyinput :clearable="false" :inputBorder="false" v-model="valiFormData.addr_longitude" placeholder="请输入经度" trim="both" />
					</uni-forms-item>
					<uni-forms-item label="纬度  " required name="addr_latitude" style="display: none;">
						<uni-easyinput :clearable="false" :inputBorder="false" v-model="valiFormData.addr_latitude" placeholder="请输入纬度" trim="both" />
					</uni-forms-item>
					<uni-forms-item v-if="valiFormData.id" label="id" required name="id" style="display: none;">
						<uni-easyinput :clearable="false" :inputBorder="false" v-model="valiFormData.id" placeholder="提交id" trim="both" />
					</uni-forms-item>
				</uni-forms>
				</view>
			</uni-card>
			<uni-card :is-shadow="false" :border="false" :margin="'20rpx'" :spacing="'20rpx 40rpx'" :padding="0" >
				<view class="u-list">
					<text class="text">地址类型</text>
					<text class="text" v-if="type == 1">集合地址</text>
					<text class="text" v-else-if="type == 2">邮寄地址</text>
					<uni-data-checkbox v-else mode="tag" selectedColor="#8dc9f1" selectedTextColor="#8dc9f1" v-model="valiFormData.type" :localdata="radioData" @change="onChange"></uni-data-checkbox>
				</view>
			</uni-card>
		</view>
		<view class="address-but">
			<button v-if="id != ''" class="but but1" plain @click="delClick">删除地址</button>
			<button class="but" plain @click="addClick('valiForm')">保存地址</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				type:false, // 为true时 则是订单页面跳转过来
				id:'',
				radioData:[ // 选择地址
					{
							text: '集合地址',
							value: 1
						},
						{
							text: '邮寄地址',
							value: 2
						}
				],
				// 校验表单数据
				valiFormData: {
					a_name: '', // 联系人
					tel:'', // 联系电话 
					road:'', // 地址名称
					detail_road:"", // 详细地址
					type: 1, // 地址选择   1集合地址  2邮寄地址
					curruct:1, // 默认状态
					addr_longitude:'', // 经度 
					 addr_latitude:'', // 纬度  
				},
				// 校验规则
				rules: {
					a_name: {
						recruits: [{
							required: true,
							errorMessage: '联系人不能为空'
						},
						{
							format:'string',
							errorMessage: '联系人格式不正确'
						}]
					},
					tel: {
						recruits: [{
							required: true,
							errorMessage: '联系方式不能为空'
						},
						{
							pattern: '^[1]([3-9])[0-9]{9}$',
							errorMessage: '手机号不合法！'
						},
						{
							format:'number',
							errorMessage: '手机号格式不正确'
						}]
					},
					road: {
						recruits: [{
							required: true,
							errorMessage: '详细地址不能为空'
						},
						{
							format:'string',
							errorMessage: '详细地址格式不正确'
						}]
					},
					detail_road: {
						recruits: [{
							required: true,
							errorMessage: '详细地址不能为空'
						},
						{
							format:'string',
							errorMessage: '详细地址格式不正确'
						}]
					},
					addr_longitude: {
						recruits: [{
							required: true,
							errorMessage: '请先点击位置图标获取位置信息'
						}]
					},
					addr_latitude: {
						recruits: [{
							required: true,
							errorMessage: '请先点击位置图标获取位置信息'
						}]
					}
				},
			};
		},
		onReady() {
			let _this = this;
			uni.setNavigationBarTitle({
			    title: _this.id?'修改地址':'新增地址'
			});
		},
		onLoad(option) {
			let _this = this
			if(option.id) {
				this.id = option.id
				this.$http.get('/index/Hotelpersonal/hotel_address_info',{address_id:option.id}).
				then(function (res) {
					//这里只会在接口是成功状态返回
					_this.valiFormData = res
				}).catch(function (e) {
					//这里只会在接口是失败状态返回，不需要去处理错误提示
					uni.showToast({
						title: e.errMsg,
						icon:"none"
					})
				});
			} 
			if(option.type) {
				this.valiFormData.type = option.type
				this.type = option.type
			}
		},
		methods:{
			/**
			 * 删除操作
			 */
			async delClick() {
				try {
					let data = await this.$http.post('/index/Hotelpersonal/del_hotel_address',{id:this.id})
					// 返回到列表页
					uni.navigateBack({
					    delta: 1
					});
				} catch (err) {
					uni.showToast({
						title: err.errMsg,
						icon:"none"
					})
				}
			},
			async addClick(ref) {
				let _this = this
				try {
					let res = await this.$refs[ref].validate()
					if(res.id) {
						let data = await this.$http.post('/index/Hotelpersonal/edit_hotel_address',res)
					} else{
						let data = await this.$http.post('/index/Hotelpersonal/add_hotel_address',res)
					}
					// 返回到列表页
					uni.navigateBack({
					    delta: 1
					});
				}catch (err) {
					if(err.length > 0) {
						uni.showToast({
							title: err[0].errorMessage,
							icon:"none"
						})
					} else if(err.errMsg){
						uni.showToast({
							title: err.errMsg,
							icon:"none"
						})
					}
				}
			},
			/**
			 * 获取位置
			 */
			 getAddress() {
				let _this = this
				 uni.authorize({
				    scope: 'scope.userLocation',
				    success() {
				        uni.chooseLocation({
				            success: function (res) {
								console.log(res)
								_this.valiFormData.addr_longitude = res.longitude // 获取经度
								_this.valiFormData.addr_latitude = res.latitude // 获取纬度
								_this.valiFormData.road = res.name == ''?res.address:res.name // 获取详细地址
								_this.valiFormData.detail_road = res.address // 获取详细地址
				            },
				        	fail(e) {
								// console.log('错误信息',e)
				    //     		uni.showToast({
				    //     			title: e.errMsg,
				    //     			icon:"none"
				    //     		})
				        	}
				        });
				    },
					fail(e){
						uni.showToast({
							title:'获取位置失败！',
							icon:"none"
						})
					}
				})
			},
			/**
			 *  地址选择时触发
			 * @param {Object} e 地址选择变化后的数据
			 */
			onChange(e) {
				this.valiFormData.type = e.detail.value
			}
		}
	}
</script>

<style lang="scss">
.address {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100vh;
	.input-placeholder {
		font-size: 24rpx;
		color: rgba($color: #000000, $alpha: 0.5);
	}
	.address-card {
		flex: 1;
		overflow: auto;
		margin-bottom: 20rpx;
		.uni-card {
			border-radius: 20rpx;
			overflow: visible;
			.uni-card__header {
				padding: 6rpx 0;
			}
			.input {
				padding: 20rpx 20rpx;
				.text-box {
					font-size: 24rpx;
					font-weight: 500;
					color: #000000;
				}
				.label-text {
					font-size: 28rpx;
					font-weight: 500;
					color: rgba($color: #000000, $alpha: 0.7);
				}
				.uni-forms-item__inner {
					// padding: 0;
					.uni-forms-item__content {
						display: flex;
						flex-direction: row-reverse;
						align-items: center;
					}
				}
				.uni-input {
					line-height: 36px;
					font-size: 24rpx;
					font-weight: 500;
					color: #000000;
				}
				.uni-input1 {
					font-weight: 400;
					color: rgba($color: #000000, $alpha: 0.7);
				}
				.uni-easyinput__content-input, .uni-combox__input {
					text-align: right;
				}
				.uni-easyinput__placeholder-class {
					font-size: 28rpx;
					font-weight: 400;
					color: rgba($color: #000000, $alpha: 0.3);
				}
				.input-address {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba($color: #000000, $alpha: 0.7);
					
				}
				.input-address1 {
					font-size: 24rpx;
					font-weight: 500;
					color: #000000;
				}
			}
			.text {
				line-height: 48rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: rgba($color: #000000, $alpha: 0.7);
			}
			.text3 {
				color: #000000;
			}
			.u-list {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.uni-data-checklist {
					margin-left: 40rpx;
					.checklist-group {
						justify-content: space-between;
					
						.checklist-box {
							box-sizing: border-box;
							border: 1px solid #f5f5f5;
							border-radius: 27rpx;
							height: 54rpx;
							background: #F2F2F2!important;
							padding: 0 20rpx;
							margin-right: 20rpx;
						}
					
						.is-checked {
							border: 1px solid #8dc9f1;
							background: #E8F9F1!important;
						}
					
						.checklist-content {
							justify-content: center;
					
							.checklist-text {
								font-size: 24rpx;
								font-weight: 500;
							}
						}
					}
				}
			}
		}
	}
	.address-but {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 80rpx;
		margin-bottom: 40rpx;
		.but {
			flex: 1;
			color: #FFFFFF;
			background: linear-gradient(-90deg, #8dc9f1, #d8eefc);
			border-radius: 40rpx;
			line-height: 80rpx;
			border: 0;
			margin: 0 20rpx;
		}
		.but1 {
			color: #000000;
			background: linear-gradient(-90deg, #ffffff, #ffffff);
		}
	}
}
</style>
